<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
</head>
<body>
<div id="app">
    <!--  1.循环数组  循环时最好指定key  标识循环数据位置-->
    <h3 v-for="item in hobbies" v-text="item" :key="item"></h3>
    <!--  2.带下标的循环遍历 参数1：遍历数据 参数2：下标  -->
    <h3 v-for="(item,index) in hobbies" v-text="item" :key="index"></h3>
    <!--  3.循环对象  -->
    <div v-for="user in userList" :key="user.id">
        <span v-text="user.id"></span>
        <span v-text="user.name"></span>
    </div>
</div>
<script src="../js/vue.js" ></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            hobbies: ['打游戏','敲代码','喝水','水王八'],
            userList: [{
                id: 100,
                name: '孙尚香'
            },{
                id: 200,
                name: '王昭君'
            },{
                id: 300,
                name: '貂蝉'
            }]
        }
    })
</script>
</body>
</html>